<template>
  <div class="container" v-loading="dataInfoLoading">
    <el-row>
      <el-col :span="18">
        <div class="content_l">
          <ul class="list_content">
            <li class="list_item">
              <dl class="list_item_l" :gutter="24">
                <dt>
                  <h3 v-if="companyName">{{ companyName }}</h3>
                  <em v-if="companyStatus">{{ companyStatus }}</em>
                </dt>
                <el-col class="inline_block" :xs="24" :sm="24" :md="12" :lg="12" :xl="12" v-for="(item, index) in companyInfo.lx" :key="index">
                  <span class="label">{{ item.key }}</span>
                  <span class="val">{{ replaceVal(item.val) }}</span>
                </el-col>
              </dl>
              <div class="list_item_r">
                <el-button size="mini" v-if="companyInfo.customer_type == 1" type="primary" @click="addIntended('2')">添加至意向客户</el-button>
                <el-button size="mini" v-else-if="companyInfo.customer_type == 2" @click="addIntended('1')">取消意向客户</el-button>
                <el-button size="mini" v-if="companyInfo.is_black == 0" style="margin-top: 10px" type="primary" @click="addBlack('1')">加黑名单</el-button>
                <el-button size="mini" v-else-if="companyInfo.is_black == 1" style="margin-top: 10px" @click="addBlack('0')">取消意黑名单</el-button>
              </div>
            </li>
          </ul>
          <div class="nav_centent">
            <ol class="nav" :class="{ fixedNavbar: isfixTab }">
              <li v-for="(todo, index) in tablist" v-on:click="changeTab(index)" v-bind:class="{ active: index == current }">
                <a :href="'#' + todo.href"> {{ todo.text }}</a>
              </li>
            </ol>
          </div>
          <div class="hid-scroll-bar">
            <div class="scroll-box" id="scroll-box">
              <!--模块列表-->
              <!-- 工商信息 -->
              <div class="Commerce roll_box" id="section1">
                <div class="content_title">
                  <h2>工商信息</h2>
                </div>
                <table>
                  <tbody>
                    <tr v-for="(item, index) in companyInfo.gs" :key="index">
                      <th>{{ item.key }}</th>
                      <td>{{ item.val }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!-- 信息发布记录 -->
              <div class="direct roll_box" id="section2">
                <div class="content_title">
                  <h2>信息发布记录</h2>
                </div>
                <div class="content_list">
                  <el-table :data="infoRecords" size="mini" :header-cell-style="{ background: '#F5F5F5', color: '#000000' }" ref="table" style="width: 100%">
                    <el-table-column align="center" header-align="center" label="信息标题" prop="name"></el-table-column>
                    <el-table-column align="center" header-align="center" label="发布时间" prop="created_time"></el-table-column>
                    <el-table-column align="center" header-align="center" label="信息状态" prop="status"></el-table-column>
                    <el-table-column align="center" fixed="right" header-align="center" label="操作" width="200"> </el-table-column>
                  </el-table>
                </div>
              </div>
              <!-- 跟踪记录 -->
              <div class="direct roll_box" id="section3">
                <div class="content_title">
                  <h2>跟踪记录</h2>
                </div>
                <div class="content_list">
                  <el-table :data="infoRecords" size="mini" :header-cell-style="{ background: '#F5F5F5', color: '#000000' }" ref="table" style="width: 100%">
                    <el-table-column align="center" header-align="center" label="信息标题" prop="name"></el-table-column>
                    <el-table-column align="center" header-align="center" label="发布时间" prop="created_time"></el-table-column>
                    <el-table-column align="center" header-align="center" label="信息状态" prop="status"></el-table-column>
                    <el-table-column align="center" fixed="right" header-align="center" label="操作" width="200">
                      <template slot-scope="scope">
                        <!--                    <el-button size="mini" plain type="primary" v-if="Jurisdictionlist.indexOf('CustomerPoolDetail')>-1" @click="detail(scope)">详情</el-button>-->
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="content_r">
          <div class="content_r_title">
            <span>客户标签</span>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { companyInfoDescApi } from '@/api/customer'
import { addIntendedTApi, AITasksAddBlockTApi } from '@/api/outboundCall'
export default {
  name: 'detail',
  data() {
    return {
      tablist: [
        { text: '工商信息', href: 'section1' },
        { text: '信息发布记录', href: 'section2' },
        { text: '跟踪记录', href: 'section3' },
      ],
      current: 0,
      // 工商信息
      companyInfo: [],
      //信息发布记录
      infoRecords: [],
      isfixTab: false,
      companyName: null,
      companyStatus: null,
      dataInfoLoading: false,
    }
  },
  mounted() {
    this.getDataDesc()
    window.addEventListener('scroll', this.handleTabFix, true)
  },
  //离开当前组件前一定要清除滚动监听，否则进入其他路由会报错
  beforeRouteLeave(to, from, next) {
    window.removeEventListener('scroll', this.handleTabFix, true)
    next()
  },
  methods: {
    changeTab(index) {
      this.current = index
    },
    handleTabFix() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      var offsetTop = document.querySelector('.nav_centent').offsetTop
      scrollTop > offsetTop ? (this.isfixTab = true) : (this.isfixTab = false)

      // 获取所有锚点元素
      const navContents = document.querySelectorAll('.scroll-box .roll_box')
      // 所有锚点元素的 offsetTop
      const offsetTopArr = []
      navContents.forEach((item) => {
        offsetTopArr.push(item.offsetTop)
      })
      let navIndex = 0
      for (let n = 0; n < offsetTopArr.length; n++) {
        if (scrollTop >= offsetTopArr[n]) {
          navIndex = n
        }
      }
      this.current = navIndex
    },
    // 获取详情数据
    getDataDesc() {
      this.dataInfoLoading = true
      const info = { id: this.$route.query.id }
      companyInfoDescApi(info)
        .then((res) => {
          this.companyInfo = res.data
          this.companyName = res.data.gs.find((u) => u.key == '法人名称：').val
          this.companyStatus = res.data.gs.find((u) => u.key == '经营状态：').val
          this.dataInfoLoading = false
        })
        .catch((e) => {
          this.companyInfo = []
          this.companyName = null
          this.companyStatus = null
          this.dataInfoLoading = false
        })
    },
    replaceVal(val) {
      if (val.includes('//cp.11467.com/home/clearmobile/index/phone/')) {
        return val.replace('//cp.11467.com/home/clearmobile/index/phone/', '')
      } else if (val.includes('//wpa.qq.com/msgrd')) {
        var regex = /uin=(\d+)/
        var match = val.match(regex)
        return match ? match[1] : null
      }
      return val
    },
    addIntended(sts) {
      const info = Object.assign({ id: this.$route.query.id, sts: sts })
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      let message = ''
      if (sts == '2') {
        message = '添至意向客户成功'
      } else if (sts == '1') {
        message = '取消意向客户成功'
      }
      addIntendedTApi(formData)
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: message,
              type: 'success',
            })
            this.getDataDesc()
          }
        })
        .catch((e) => {})
    },
    addBlack(sts) {
      const info = Object.assign({ id: this.$route.query.id, sts: sts })
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      let message = ''
      if (sts == '1') {
        message = '加黑名单成功'
      } else if (sts == '0') {
        message = '取消黑名单成功'
      }
      AITasksAddBlockTApi(formData)
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: message,
              type: 'success',
            })
            this.getDataDesc()
          }
        })
        .catch((e) => {})
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  background: #f0f1f4;
  .content_l {
    padding: 30px;
    box-sizing: border-box;
    background: #fff;
    .list_content {
      width: 100%;
      padding: 0;
      margin: 0;
      .list_item {
        border: 1px solid #e2e2e2;
        border-radius: 4px;
        padding: 24px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        width: 100%;
        .list_item_l {
          width: 100%;
          margin: 0;
          dt {
            margin-bottom: 20px;
            h3 {
              color: #2c68ff;
              font-size: 24px;
              display: inline-block;
              margin: 0 10px 0 0;
              font-weight: 500;
            }
            em {
              color: #ffb561;
              font-size: 14px;
              border: 1px solid #ffb561;
              border-radius: 2px;
              font-style: normal;
              padding: 1px 6px;
            }
          }
          .inline_block {
            margin: 0 0 16px 0;
            font-size: 14px;
            display: flex;
            .label {
              color: #8c8c8c;
            }
            .val {
              color: #262626;
              display: inline-block;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              vertical-align: sub;
              flex: 1;
            }
            &:last-child,
            &:nth-last-child(2) {
              margin: 0;
            }
          }
        }
        .list_item_r {
          text-align: center;
        }
      }
    }
    .nav_centent {
      width: 100%;
      .nav {
        width: 100%;
        font-size: 18px;
        height: 78px;
        color: #333333;
        border-bottom: 1px solid #e2e2e2;
        margin: 0;
        padding: 0;
        li {
          display: inline-block;
          padding: 0 10px;
          margin-top: 40px;
          position: relative;
          margin-right: 60px;
          cursor: pointer;
          &.active a {
            font-weight: 600;
            color: #2c68ff;
            font-size: 18px;
            &:after {
              content: '';
              position: absolute;
              width: 100%;
              background: #2c68ff;
              height: 3px;
              left: 0;
              bottom: -15px;
            }
          }
          a {
            color: #333;
            text-decoration: none;
          }
        }
      }
      .fixedNavbar {
        position: fixed;
        top: 83px;
        right: 0;
        box-shadow: none;
        z-index: 99999;
        background: #fff;
        width: calc(100% - 210px);
        height: 50px;
        li {
          margin-top: 13px;
        }
      }
    }
    .content_title {
      width: 100%;
      margin-bottom: 10px;
      h2 {
        color: #333333;
        font-size: 16px;
        position: relative;
        padding-left: 10px;
        font-weight: 600;
        &:after {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          width: 4px;
          height: 20px;
          background: #2c68ff;
        }
      }
    }
    .Commerce {
      margin-top: 40px;
      table {
        border-collapse: collapse;
        width: 100%;
        tr {
          height: 50px;
          color: #333333;
          font-size: 14px;
          th {
            width: 190px;
            background: #f5f5f5;
            padding-left: 30px;
            box-sizing: border-box;
            text-align: left;
            border-bottom: 1px solid #e2e2e2;
            border-right: 1px solid #e2e2e2;
            &:first-child {
              border-left: 1px solid #e2e2e2;
              border-top: 1px solid #e2e2e2;
            }
          }
          td {
            border-bottom: 1px solid #e2e2e2;
            border-right: 1px solid #e2e2e2;
            padding: 15px 0 15px 34px;
            &:first-child {
              border-left: 1px solid #e2e2e2;
            }
          }
          &:first-child {
            border-top: 1px solid #e2e2e2;
          }
        }
      }
    }
    .direct {
      margin-top: 50px;
    }
  }
  .content_r {
    padding: 30px;
    box-sizing: border-box;
    background: #fff;
    margin-left: 20px;
  }
}
</style>
